<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>用户界面样式</title>
	<style>
	  div {
		  margin: 10px;
		}
	  ul {
			outline-style: dashed;
			outline-width: 1px;
			outline-color: wheat;
		}
	  li {
		  color: red;
		  cursor: move;
			outline: 1px inset invert;
		}
	  li:first-child {
		  cursor: wait;
		}
	  li:nth-child(2) {
		  cursor: help;
		}
	  li:nth-child(3) {
		  cursor: progress;
		}
	  li:nth-child(4) {
		  cursor: not-allowed;
		}
	  li:nth-child(5) {
		  cursor: -webkit-grab;
		}
	  li:nth-child(6) {
		  cursor: -webkit-grabbing;
		}
	  li:nth-child(7) {
		  cursor: no-drop;
		}

		.circle-border {
      width: 100px;
      height: 100px;
      border-radius: 99%;
      border: 1px solid;
      color: wheat;
			outline: 1px solid red;
		}
  
	  .pre-wrap {
		  white-space: pre-wrap;
			text-decoration: none;
			outline: 1px solid green;
		}
		.no-copy {
		  -webkit-user-select: none;
			-moz-user-select: none;
			-ms-user-select: none;
			user-select: none; /* likely future */
			/* cursor: none; */
			cursor: not-allowed;
		}
	</style>
</head>
<body>
	<ul>
		<li>cursor</li>
		<li>cursor</li>
		<li>cursor</li>
		<li>cursor</li>
		<li>cursor</li>
		<li>cursor</li>
		<li>cursor</li>
	</ul>
	<div class="circle-border"> border circle, outline square </div>
	<div>
    <a href="#">This link has 
    	<span class="pre-wrap">been outlined 
    	for your protection</span>
	  </a>
	</div>
	<div class="zoom">
	  <h2>zoom</h2>
	  <img src="../other/images/qrcode.jpg" style="zoom:1" alt="">
	  <img src="../other/images/qrcode.jpg" style="zoom:.5" alt="">
	  <img src="../other/images/qrcode.jpg" style="zoom:.1" alt="">
	</div>
	<div class="user-select">
	  <h2>user select</h2>
		<div class="no-copy">you can't copy me</div>
		<div>
		  head
			<p class="no-copy">you can't copy me</p>
			tail
		</div>
		<div>normal text</div>
		<div class="all-copy">all select</div>
	</div>
</body>
</html>
